<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
/* 
  state:
  1.可以在组件模板中通过 $store.state.count
  2.可以通过 mapState 映射的方式使用
  3.如果是组合式 API 可以通过 hooks 方式使用
  import { useStore } from 'vuex'
  const store = useStore()
  store 同 $store 相同
*/

/* 
  getters:
  1.可以在组件模板中通过 $store.getters.getCountAdd
  2.可以通过 mapGetters 映射的方式使用
  3.如果是组合式 API 可以通过 hooks 方式使用
  import { useStore } from 'vuex'
  const store = useStore()
  store 同 $store 相同
*/

/* 
  mutations:唯一修改数据的地方
  1.通过this.$store.commit('add')
  2.通过mapMutations
*/

/* 
  actions:处理异步的地方 
  1.通过this.$store.dispatch('add')
  2.通过mapActions
*/

/* 
  modules:状态模块,可以将具有相同特性属性放在一个模块中

*/

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['getCountAdd'])
  },
  methods: {
    ...mapMutations(['add']),
    ...mapActions(['addActions']),
    btnClick() {
      // this.$store.commit('add')
      // this.add()
      // this.$store.dispatch('addActions')
      this.addActions()
    }
  },
}
</script>
<template>
  <div>
    <div>
      使用 state 中的数据 ,在模板中可以通过 $store.state.count
      {{ $store.state.count }}---{{ count }}
    </div>
    <div>
      使用getters中的内容,在模板中直接通过 $store.getters.getCountAdd
      {{ $store.getters.getCountAdd }}---{{ getCountAdd }}
    </div>
    <div>
      <button @click="btnClick">使用函数</button>
    </div>

    <div>
      {{ $store.state.student.name }}
    </div>
  </div>
</template>